<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <style type="text/css">
        html , body {
            margin: 0;padding: 0;height: 100%;
        }
        ul.source {
            margin:0;
            height: 215px;
        }
        ul.source li {
            list-style: none;
            display: inline-flex;
            width: 110px;
            font-size: 160px;
            color: red;
        }
        ul.source li div , ul.target li div {
            cursor: move;
        }

        ul.target {
            margin:0;
            list-style: none;
        }
        ul.target li {
            margin: 10px;
            display: inline-flex;
            width: 110px;
            height: 160px;
        }

        ul.target li div {
            width: 110px;
            font-size: 160px;
            color: red;
        }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>

    <ul class="source"></ul>

    <div style="margin: 10px auto;width: 700px;">
        <fieldset style="display: inline-block;text-align: center;">
            <legend align="right">功能菜单</legend>
            <div>
                <button style="margin-left: 15px;" onclick="orderDispose()">顺序排列</button>
                <button style="margin-left: 15px;" onclick="convert1Dispose()"><b>1</b> 排列组合</button>
                <button style="margin-left: 15px;" onclick="convert2Dispose()"><b>2</b> 排列组合</button>
                <button style="margin-left: 15px;" onclick="convert3Dispose()"><b>3</b> 排列组合</button>
            </div>
        </fieldset>

    </div>

    <ul class="target target_1"></ul>
    <ul class="target target_2"></ul>
    <ul class="target target_3"></ul>

</body>
</html>